<template>
	<view class="item" :style="[itemStyle,customStyle]">
		<image :src="`${imageUrl(item.filePath)}`"  mode="aspectFill" class="block-image"></image>
		<view class="block-card-title">
			{{ item.name }}
		</view>
		<view class="block-card-text">
			{{ item.createTime}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "album-preview",
		props: {
			item: {
				type: [Object, String],
				default: () => {}
			},
			height: {
				type: String,
				default: '300rpx'
			},
			customStyle: {
				type: Object,
				default: () => {
					return {};
				}
			},
			itemStyle:{
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100vw;
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		width: 100%;
		flex:1;
		color: #ffffff;
	}

	.block-card-title {
		font-weight: bold;
		font-size: 36rpx;
		color: #4a6680;
		padding: 15rpx;
	}

	.block-card-text {
		font-size: 22rpx;
		color: rgba(69, 90, 100, 0.6);
	}
	
	.block-image{
		flex: 1;
		    width: 128%;
	}
</style>